<template>
    <!--电销管理 已达成-->
    <div class="content_panel project_modules">
        <div class="content_panel project_modules">
            <div class="content_panel_top">
                <h3 class="panel_title">
                    <span>{{$t('salesManage.reached')}}</span>
                </h3>
                <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                    <el-row :gutter="20">
                        <el-col :span="4">
                            <el-form-item prop="realName"><!--姓名-->
                                <el-input v-model="form.realName" :placeholder="$t('common.name')" type="text" clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item prop="phone"><!--手机号-->
                                <el-input v-model="form.phone" :placeholder="$t('common.mobileNumber')" type="text" clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item prop="batchCode"><!--批次号-->
                                <el-input v-model="form.batchCode" :placeholder="$t('salesManage.batchNumber')" type="text" clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="distributionTime" label=""><!--分派时间-->
                                <el-date-picker
                                        v-model="form.distributionTime"
                                        type="datetimerange"
                                        format="yyyy-MM-dd HH:mm:ss"
                                        value-format="timestamp"
                                        :editable="false"
                                        range-separator="-"
                                        :start-placeholder="$t('common.dispatchStartTime')"
                                        :end-placeholder="$t('common.dispatchEndTime')"
                                        :default-time="['00:00:00', '23:59:59']"
                                        class="el-select"
                                        style="width:100%;"
                                        clearable>
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <!--营销类型-->
                        <el-col :span="4">
                            <el-form-item prop="marketingType">
                                <el-select v-model="form.marketingType" clearable :placeholder="$t('salesManage.marketingType')"
                                           style="width: 100%"><!--营销类型-->
                                    <el-option v-for="item in keyMap.marketingType()" :key="item.value"
                                               :value="item.value" :label="item.label"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <!--所属APP-->
                        <el-col :span="4">
                            <el-form-item prop="appName">
                                <select-app-list v-model="form.appName"
                                                 :placeholder="$t('common.ownedApp')"></select-app-list><!--所属APP-->
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="agreeTime" label=""><!--达成时间-->
                                <el-date-picker
                                        v-model="form.agreeTime"
                                        type="datetimerange"
                                        format="yyyy-MM-dd HH:mm:ss"
                                        value-format="timestamp"
                                        :editable="false"
                                        range-separator="-"
                                        :start-placeholder="$t('salesManage.achieveStartTime')"
                                        :end-placeholder="$t('salesManage.achieveEndTime')"
                                        :default-time="['00:00:00', '23:59:59']"
                                        class="el-select"
                                        style="width:100%;"
                                        clearable>
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col v-if="roleId === 2||roleId === 3" :span="4">
                            <el-form-item prop="salesmanName"><!--电销员-->
                                <el-input v-model="form.salesmanName" :placeholder="$t('salesManage.salesman')" type="text" clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col  v-if="roleId === 3" :span="4">
                            <el-form-item prop="salesmanGroupName"><!--电销小组-->
                                <el-select v-model="form.salesmanGroupName" :placeholder="$t('salesManage.salesTeam')" clearable style="width:100%;">
                                    <el-option v-for="item in captainList" :key="item.username" :value="item.username" :label="item.username"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                            <el-button v-if="roleId===3" @click="exportExcel" type="primary">{{ $t('common.export') }}</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>

        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table  :data="tableData" :max-height="tableMaxHeight" style="width: 100%;">
                        <!-- 手机号 -->
                        <el-table-column prop="phone" :label="$t('common.mobileNumber')" min-width="130">
                            <template slot-scope="{ row, $index }">
                                <a @click="goDetail(row, $index)" type="text" size="small" v-if="row.phone" href="javascript:void(0);">{{ row.phone }}</a>
                            </template>
                        </el-table-column>
                        <!-- 姓名 -->
                        <el-table-column prop="realName" :label="$t('common.name')" min-width="210"></el-table-column>
<!--                        &lt;!&ndash; userType &ndash;&gt;
                        <el-table-column prop="problemNum" :label="$t('common.userType')" min-width="100">
                            <template slot-scope="scope">{{ scope.row.userType | UserTypeTelSales }}</template>
                        </el-table-column>-->
<!--                        <el-table-column prop="extraInformation" :label="$t('salesManage.informationAdditional')" :show-overflow-tooltip="true" min-width="120"></el-table-column>-->
                        <!--营销类型-->
                        <el-table-column prop="marketingType" :label="$t('salesManage.marketingType')" min-width="120">
                            <template slot-scope="{ row }">{{ keyMap.marketingType(row.marketingType) }}</template>
                        </el-table-column><!--营销类型-->
                        <!--优惠券-->
                        <el-table-column prop="couponUrl" :label="$t('common.coupons')" min-width="180">
                            <template slot-scope="{ row }">{{ !row.couponUrl ? '--' : row.couponUrl }}</template>
                        </el-table-column><!--优惠券-->
                        <!-- 备注 -->
                        <el-table-column prop="recordRemark" :label="$t('common.remark')" min-width="100" :show-overflow-tooltip="true" >
                            <template slot-scope="{ row }">
                                {{!row.recordRemark?'--':row.recordRemark}}
                            </template>
                        </el-table-column>
                        <!--<el-table-column prop="phone" :label="$t('common.call')" min-width="120">-->
                            <!--<template slot-scope="{ row }">-->
                                <!--<el-button @click="$call(row.phone)" type="text" icon="el-icon-phone">Call</el-button>-->
                            <!--</template>-->
                        <!--</el-table-column>-->
                        <!-- 分派时间 -->
                        <el-table-column prop="distributionTime" :label="$t('tel.timeDispatch')" min-width="170">
                            <template slot-scope="scope">{{ scope.row.distributionTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <!-- 达成时间 -->
                        <el-table-column prop="agreeTime" :label="$t('salesManage.achieveTime')" min-width="170">
                            <template slot-scope="scope">{{ scope.row.agreeTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <!-- 最近申请时间 -->
                        <el-table-column prop="lastApplyTime" :label="$t('salesManage.recentApplyTime')" min-width="170">
                            <template slot-scope="scope">{{ scope.row.lastApplyTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <template v-if="roleId===2||roleId===3">
                            <!-- 最近放款时间 -->
                            <el-table-column prop="lastLoanTime" :label="$t('salesManage.recentLoanTime')" min-width="170">
                                <template slot-scope="scope">{{ scope.row.lastLoanTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                            </el-table-column>
                            <!-- 电销员 -->
                            <el-table-column prop="salesmanName" :label="$t('salesManage.salesman')" min-width="180" >
                                <template slot-scope="{row}">{{ row.salesmanName }}</template>
                            </el-table-column>
<!--                            &lt;!&ndash; 操作 &ndash;&gt;
                            <el-table-column prop="telUserId" :label="$t('common.operation')" min-width="100" >
                                <template slot-scope="scope">
                                    <el-button @click="turnDown(scope.row)" type="text">{{ $t('salesManage.turnDown') }}</el-button>
                                </template>
                            </el-table-column>-->
                        </template>
                        <!--所属APP-->
                        <el-table-column prop="appName" :label="$t('common.ownedApp')" min-width="120">
                            <template slot-scope="{ row }">{{ row.appName | switchAppName }}</template>
                        </el-table-column><!--所属APP-->
                        <el-table-column prop="productName" :label="$t('finance.productName')" min-width="180"></el-table-column><!--产品名-->
                        <!-- 批次号 -->
                        <el-table-column prop="batchCode" :label="$t('salesManage.batchNumber')" min-width="180"></el-table-column>
                        <!-- 电销小组 -->
                        <el-table-column v-if="roleId===3" key="salesmanGroupName" prop="salesmanGroupName" :label="$t('salesManage.salesTeam')" min-width="180"></el-table-column>
                        <!-- 导入备注 -->
                        <el-table-column prop="remark" :label="$t('common.importRemark')" min-width="100" :show-overflow-tooltip="true" >
                            <template slot-scope="{ row }">{{!row.remark?'--':row.remark}}</template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页组件 -->
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';
    import mixinTM from './mixin/mixin-tel-manage';
    import keyMap from '@/config/key-map';
    import SelectAppList from '@/components/select-app-list';

    export default {
        name: 'telemarketing-telManage-reached',
        components: {
            Pagination,
            SelectAppList,
        },
        mixins: [mixin, mixinTM],
        data() {
            return {
                keyMap,
                userStorage: this.$storage.get("user"),
                roleId: 0, //客服员角色 0：待分配 1：客服专员  2：主管 3-经理
                form: {
                    currentStatus:3,
                    phone: "",
                    realName: "",
                    batchCode: "",
                    distributionTime: [],
                    agreeTime: [],
                    salesmanName: "",
                    salesmanGroupName: "",
                    marketingType: "",
                    appName: "",
                },
                totalRecord: "",
                problemDesc: "",
                detailShow: false,
                changeSearchFlag: false,
                rules: {
                    phone: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ]
                },
                bindPNVisible: false,
                gridData: [],
                captainList:[]
            };
        },
        methods: {
            tableRowClassName({row}){
                if(row.register){
                    return 'warning-row'
                }
            },
            turnDown(row){
                const params = {
                    telUserId: row.telUserId,
                    batchId: row.batchId,
                };
                this.$api.telSales.rejectAuditedUser(params).then(res => {
                    const { status, error } = res;
                    if (status === "1" && error === "00000000") {
                        this.$message({
                            message: this.$tc('common.successfulOperation'),
                            type: 'success'
                        });
                        this.getTableData();
                    }else{
                        this.$alert(this.$tc('salesManage.turnDownTips1'), this.$tc('salesManage.tips'), {
                            confirmButtonText: this.$t('common.confirm'),
                        });
                    }
                });
            },
        },
        created() {
            this.getCaptainList();
            this.getUserInfo();
        }
    }
</script>
<style lang="scss">
    [data-page=telemarketing-telManage-reached] {
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
        .el-button {
            margin-bottom: 18px
        }
        .warning-row{
            color: #a30014 !important;
            a{
              color: #a30014 !important;
            }
        }
        .el-table__row {
            .el-button {
                margin-bottom: 0px
            }
        }
    }
</style>

